import { Layout, Form,Breadcrumb,Input,Button,Select,Table,Space} from 'antd';
import Date from '../../components/Date';
import './listOrder.less';
import {Link} from 'react-router-dom';
import Close from './modal/close';
import Torder from './modal/torder';
const {Content} = Layout;

function ListOrder(){
  const columns = [
    {
      title: '订单编号',
      dataIndex: '订单编号',
      key: '订单编号',
      width:100
    },
    {
      title: 'ID',
      dataIndex: 'ID',
      key: 'ID',
    },
    {
      title: '下单时间',
      dataIndex: '下单时间',
      key: '下单时间'
    },
    {
      title: '姓名',
      key: '姓名',
      dataIndex: '姓名',
      width:80
    },
    {
      title: '联系方式',
      dataIndex: '联系方式',
      key: '联系方式',
    },
    {
      title: '服务类型',
      dataIndex: '服务类型',
      key: '服务类型',
      width:80
    },
    {
      title: '订单价格',
      dataIndex: '订单价格',
      key: '订单价格',
      width:80
    },
    {
      title: '实付金额',
      key: '实付金额',
      dataIndex: '实付金额',
      width:80
    },
    {
      title: '陪护员',
      dataIndex: '陪护员',
      key: '陪护员'
    },
    {
      title: '状态',
      key: '状态',
      dataIndex: '状态'
    },
    {
      title: '操作',
      key: '操作',
      render: () => (
        <Space size="middle">
          <a><Link to='/home/orderManege/details'>查看</Link></a>
          <Torder/>
          <Close/>
        </Space>
      ),
      width:170
    },
  ];
  const data = [
    {
      key: '1',
      订单编号: 'CJR2139987',
      ID: 'CJR-001',
      下单时间: '2018-11-08 19:22:09',
      姓名:'孙博凯',
      联系方式:'15216643215',
      服务类型:'理发',
      订单价格:'￥38',
      实付金额:'￥38',
      陪护员:'华启仁',
      状态:'等待系统分配',
    },
    {
      key: '2',
      订单编号: 'CJR2139987',
      ID: 'CJR-001',
      下单时间: '2018-11-08 19:22:09',
      姓名:'孙博凯',
      联系方式:'15216643215',
      服务类型:'理发',
      订单价格:'￥38',
      实付金额:'￥38',
      陪护员:'华启仁',
      状态:'等待系统分配',
    },
    {
      key: '3',
      订单编号: 'CJR2139987',
      ID: 'CJR-001',
      下单时间: '2018-11-08 19:22:09',
      姓名:'孙博凯',
      联系方式:'15216643215',
      服务类型:'理发',
      订单价格:'￥38',
      实付金额:'￥38',
      陪护员:'华启仁',
      状态:'等待系统分配',
    },
  ];
    return(
        <div className='zlist'>
           <Layout style={{ padding: '0 20px 20px 24px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                <p>订单列表</p>
                <Breadcrumb.Item>订单管理</Breadcrumb.Item>
                <Breadcrumb.Item>订单列表</Breadcrumb.Item>
                </Breadcrumb>
                <Form  className='form'
                    layout="inline">
                        <Form.Item className='date' label="时间">
                            <Date/>
                        </Form.Item>
                        <Form.Item label="编号">
                            <Input placeholder='请输入编号' />
                        </Form.Item>
                        <Form.Item label="用户">
                            <Input placeholder='请输入姓名' />
                        </Form.Item>
                        <Form.Item label="陪护员">
                            <Input placeholder='请输入陪护员' />
                        </Form.Item>
                        <Form.Item label="状态">
                            <Select placeholder='请选择'>
                                <Select.Option value="待付款">待付款</Select.Option>
                                <Select.Option value="等待系统分配">等待系统分配</Select.Option>
                                <Select.Option value="陪护员接单">陪护员接单</Select.Option>
                                <Select.Option value="服务中">服务中</Select.Option>
                                <Select.Option value="交易完成评价">交易完成评价</Select.Option>
                                <Select.Option value="交易关闭">交易关闭</Select.Option>
                                <Select.Option value="退款中">退款中</Select.Option>
                                <Select.Option value="退款成功">退款成功</Select.Option>
                                <Select.Option value="退款失败">退款失败</Select.Option>
                            </Select>
                        </Form.Item>
                        <Button type="primary">筛选</Button>
                        {/* <Button type="primary" className='but'>添加</Button> */}
                    </Form>
                <Content>
                    <Table columns={columns} dataSource={data} />
                </Content>
            </Layout>
        </div>
    )
}
export default ListOrder